import {toast, ToastContent, ToastOptions} from 'react-toastify'
import {mdiClose} from '@mdi/js'
import React from 'react'
import ButtonIcon from '../icon/ButtonIcon'
import {COLORS} from '../color'
import {TypeOptions} from 'react-toastify/dist/types'

function configureToast() {
  toast.configure()
}

function getColorCloseButton(type?: TypeOptions) {
  if (!type) {
    return COLORS.gray700
  }
  switch (type) {
    case 'default':
      return COLORS.gray700
    case 'warning':
      return COLORS.gray700
    case 'dark':
      return COLORS.white
    case 'error':
      return COLORS.white
    case 'info':
      return COLORS.white
    case 'success':
      return COLORS.white
  }
}

function getHoverIconColorCloseButton(type?: TypeOptions) {
  if (!type) {
    return 'black'
  }
  switch (type) {
    case 'default':
      return 'black'
    case 'warning':
      return 'white'
    case 'dark':
      return 'white'
    case 'error':
      return 'white'
    case 'info':
      return 'white'
    case 'success':
      return 'white'
  }
}

function createToast(content: ToastContent, options?: ToastOptions) {
  const isBlackButton = !options?.type || options.type === 'warning'
  const colorCloseButton = getColorCloseButton(options?.type)
  toast(<div>{content}</div>, {
    autoClose: 5000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    progress: undefined,
    closeButton: (
      <ButtonIcon
        iconPath={mdiClose}
        color={isBlackButton ? COLORS.gray900 : colorCloseButton}
        size={'md'}
        hoverIconColor={isBlackButton ? 'black' : getHoverIconColorCloseButton(options?.type)}
        isHoverArea
        title={'Закрыть'}
      />
    ),
    ...(options || {}),
  })
}

function createSuccessToast(content: ToastContent, options?: ToastOptions) {
  return createToast(content, {...options, type: 'success'})
}

export {configureToast, createToast, createSuccessToast}
